<script setup lang="ts">
import { PropType, computed } from 'vue'
import ContentText from '@/basePackage/pages/customerService/cmponents/content-text.vue'
import ContentImage from '@/basePackage/pages/customerService/cmponents/content-image.vue'
import ContentProduct from '@/basePackage/pages/customerService/cmponents/content-product.vue'
import ContentOrder from '@/basePackage/pages/customerService/cmponents/content-order.vue'
import type { Message, ShopData } from '@/basePackage/pages/customerService/types'
//引入商家的store 用于获取商家的信息
import { useShopInfoStore } from '@/store/modules/shopInfo/index'
const ShopInfoStore = useShopInfoStore()
console.log(ShopInfoStore.shopInfo.logo)

const $props = defineProps({
    message: { type: Array as PropType<Message[]>, required: true },
    shopInfo: { type: Object as PropType<ShopData>, required: true },
})

const isMine = (message: Message) => {
    return message.sender.senderType === 'SHOP_ADMIN'
}
const currentMessages = computed(() => {
    const newArr: Message[] = []
    $props.message.forEach((item) => {
        newArr.unshift(item)
    })
    return newArr
})
</script>

<template>
    <view v-for="msg in currentMessages" :key="msg.id" class="chat" :class="!isMine(msg) ? '' : 'coustomer'">
        <view class="chat__time">
            <text>{{ msg.createTime }}</text>
        </view>
        <view class="chat__body" :class="!isMine(msg) ? '' : 'coustomer__body'">
            <view class="chat__body-avatar">
                <u-avatar :src="!isMine(msg) ? $props.shopInfo.shopLogo : ShopInfoStore.shopInfo.logo" mode="circle" img-mode=""> </u-avatar>
            </view>
            <view class="chat__body--content">
                <content-text v-if="msg.messageType === 'TEXT'" :is-mine="isMine(msg)" :msg="msg.message" />
                <content-image v-if="msg.messageType === 'IMAGE'" :msg="msg.message" :is-mine="isMine(msg)" />
                <content-product v-if="msg.messageType === 'PRODUCT'" :msg="msg.message" :is-mine="isMine(msg)" :shop-id="$props.shopInfo.shopId" />
                <content-order v-if="msg.messageType === 'ORDER'" :msg="msg.message" :is-mine="isMine(msg)" :shop-id="$props.shopInfo.shopId" />
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
$content-bg: #606266;
@include b(chat) {
    @include e(time) {
        padding: 10rpx 0;
        text-align: center;
        & > text {
            font-size: 12rpx;
        }
    }
    @include e(body) {
        width: 85%;
        @include flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    @include e(body-avatar) {
    }
    @include e(body-content) {
        width: 100%;
        position: relative;
        margin-left: 20rpx;
        border-radius: 15rpx;
        background: $content-bg;
        padding: 20rpx;
        &::after {
            content: '';
            position: absolute;
            left: -10rpx;
            top: 35rpx;
            height: 0;
            width: 0;
            border-top: 10rpx solid transparent;
            border-right: 10rpx solid $content-bg;
            border-bottom: 10rpx solid transparent;
        }
    }
}
@include b(coustomer) {
    @include e(body) {
        width: 100%;
        flex-direction: row-reverse;
        justify-content: flex-start;
        padding-left: 100rpx;
    }
    @include e(body-content) {
        width: 100%;
        margin: 0 20rpx 0 0;
        &::after {
            display: none;
        }
        &::before {
            content: '';
            position: absolute;
            top: 35rpx;
            right: -10rpx;
            height: 0;
            width: 0;
            border-top: 10rpx solid transparent;
            border-left: 10rpx solid $content-bg;
            border-bottom: 10rpx solid transparent;
        }
    }
}
</style>
